<template>
  <div class="cart-wrapper">
    <div class="dian"><img src="../../assets/头部.png"></div>
    <div class="head">
      <span class="span">我的全部购物车(2)</span>
    </div>
    <div class="card" v-for="item in dataList" :key="item.id">
      <div class="store-name">{{item.storeName}}</div>
      <div class="item" v-for="(thing,index) in item.things" :key="index" 
            v-show="index < 2 || thing.show">
        <div class="left-wrapper">
          <div class="img-wrapper">
            <div class="img"><img :src="thing.img"></div>
          </div>
          <div class="info-wrapper">
            <span class="name">{{thing.name}}</span>
            <span class="price">￥{{thing.price}}*{{thing.nums}}</span>
          </div>
        </div>
        <div class="right-wrapper">
          <span class="all-price">￥{{thing.allPrice}}</span>
        </div>
        
      </div>
      <div class="more" v-if="item.things.length >2" @click="showThing(item)">
          <span>共计{{item.nums}}件/{{item.numskg}}kg</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dataList:[{
        id:'1',
        storeName:'沃尔玛',
        nums:3,
        numskg:1.4,
        things:[{
          name:'番茄250g/份',
          price:33.6,
          nums:3,
          allPrice:99.9,
          img:require("../../assets/putao.png")
        },{
           name:'番茄250g/份',
          price:33.6,
          nums:3,
          allPrice:99.9,
          img:require("../../assets/putao.png")
        },{
           name:'番茄250g/份',
          price:33.6,
          nums:3,
          allPrice:99.9,
          img:require("../../assets/putao.png")
        }]
      },{
        id:'2',
        storeName:'沃尔玛',
        nums:3,
        numskg:1.4,
        things:[{
          name:'番茄250g/份',
          price:33.6,
          nums:3,
          allPrice:99.9,
          img:require("../../assets/putao.png")
        },{
           name:'番茄250g/份',
          price:33.6,
          nums:3,
          allPrice:99.9,
          img:require("../../assets/putao.png")
        },{
           name:'番茄250g/份',
          price:33.6,
          nums:3,
          allPrice:99.9,
          img:require("../../assets/putao.png")
        }]
      }]
    }
  },
  methods: {
    showThing(item) {
      item.things.forEach(item => {
        item.show = !item.show
      })
    }
  }
}
</script>

<style lang="css" scoped>
.cart-wrapper{
  width: 100vw;
  min-height:100vh ;
  background-color: #f3efef;
}
.dian{
  width: 100%;
  height: 5vw;
  top: 0;
}
.dian img{
  width: 100%;
  height: 5vw;
}
.head{
  height: 18vw;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.span{
  color: black;
  font-size:5.5vw ;
  font-weight: 400;
}
.card{
  width: 85vw;
  margin: 4vw auto 0 auto;
  background-color: white;
  padding: 3vw 4vw;
  border-radius: 1.5vw;
}
.card-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.store-name{
  font-size: 5vw;
  margin-bottom: 2.5vw;
}
.item{
  display: flex;
  justify-content: space-between;
  margin-bottom: 3vw;
}
.left-wrapper{
  display: flex;
}
.img{
  width: 13vw;
  height: 13vw;
  background-color: rgb(233, 44, 76);
}
.img img {
  width: 13vw;
  height: 13vw;
}
.info-wrapper{
  display: flex;
  flex-direction: column;
  margin-left: 3vw;
  justify-content: space-between;
}
.more{
  width: 100%;
  margin: auto;
  height: 7vw;
  background-color: #ebe9e9;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: ; */
}
.more span{
  font-size: 4vw;
  color: #666666;
  text-align: center;
}
</style>
